<!-- @format -->

<script lang="jsx" setup>
import {ref, watch, computed, onMounted, inject} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import LocalDB from "@/utils/LocalDB.js";

// 框架容器高度
const containerHeight = computed(() => store.getters.containerHeight)

// 全局状态管理
const store = useStore();
// 全局路由
const router = useRouter();

// 当前页面路由
const route = computed(() => useRoute());

// 已经打开的页面
const openedPages = computed(() => store.getters.openedPages);

// 当前页面组件名
const activePageComponentName = computed(() => store.getters.activePageComponentName);

// 是否正在刷新当前页面
const isReloading = computed(() => store.getters.isReloading);

// 刷新页面
function reloadPage() {
    store.dispatch("isReloading");
}

// 判断是否该显示
function isShow(component) {
    const showState = activePageComponentName.value === component.componentName;
    if (showState) {
        return {
            height: '100%',
            opacity: 1
        }
    }
    return {
        height: 0,
        opacity: 0
    }
}

// 判断是否该刷新
function isNotReloading(component) {
    // 先判断该组件是不是当前显示的页面组件
    if (activePageComponentName.value === component.componentName) {
        // 是则返回 false，销毁当前页面组件，短暂时间后在重新渲染
        if (isReloading.value) {
            return false;
        }
    }
    // 不是直接返回 true，不销毁
    return true;
}

/**
 * 监听路由变化
 */
watch(() => route.value.query, (value, oldValue) => {
    if (value.t) {
        // 如果路由中有 t
        // 获取当前路由缓存的路由参数
        const localTData = LocalDB.getItem(decodeURIComponent(value.path));
        if (localTData.data) {
            // 如果缓存的路由参数中的 t 与 当前路由中的 t 不相等则需要刷新页面
            if (localTData.data.t !== value.t) {
                console.warning("路由带 t 并刷新")
                reloadPage()
            }
        }
        // 缓存路由参数
        LocalDB.setItem(decodeURIComponent(value.path), value)
    }
})

// 组件挂载完成
onMounted(() => {
});

</script>

<template>
    <div class="normal-layout-content"  :style="{height: containerHeight + 'px'}">
        <div class="page-main">
            <template v-for="componentObj in openedPages" :key="componentObj.componentName">
                <div :style="{height: activePageComponentName === componentObj.componentName ? 'unset' : 0}" style="width: 100%;overflow: hidden">
                    <component :is="componentObj.componentName" v-if="isNotReloading(componentObj)"></component>
                </div>
            </template>
        </div>
    </div>
</template>
<style scoped lang="scss">
// 框架页面内容
.normal-layout-content {
    width: 100%;
    background-color: #f9f9f9;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    //padding: 10px;
    //box-sizing: border-box;
    .page-main {
        width: 100%;
        box-sizing: border-box;
        //    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        //    background: #fff;
        //    border-radius: 10px;
        //    height: 100%;
        //    overflow: auto;
    }
}

// 底部内容
.footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 30px;
    background-color: #f9f9f9;

    .icp-number {
        color: var(--el-color-primary);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}
</style>
